<%-- 
    Document   : login
    Created on : 19 janv. 2013, 12:26:36
    Author     : gabrielle
--%>

<%@page import="javax.security.auth.message.callback.PasswordValidationCallback"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page errorPage="error.jsp" %>

<!DOCTYPE html>
<html>
    <%@include file="WEB-INF/jspf/head.jspf"%>
    <body>
        <%@include file="WEB-INF/jspf/header.jspf"%>
        <div class="page">
            Already have an account? Login <a href="./"> here</a>
            <div class="content" id="form">
                <form action="./create" method="POST">
                <h1>Sign Up:</h1>
                <p>
                    <label for="firstname">
                        Firstname: 
                    </label>
                    <input name ="firstname" id="firstname" title="Enter your firstname"/>
                </p>
                <p>
                    <label for="lastname">
                        Lastname: 
                    </label>
                    <input name ="lastname" id="lastname" title="Enter your lastname"/>
                </p>
                <p>
                    <label for="mail">
                        Mail: 
                    </label>
                    <input name ="mail" id="mail" title="Enter your mail address"/>
                </p>
                <p>
                    <label for="username">
                        Username: 
                    </label>
                    <input name ="username" id="username" title="Enter your username"/>
                </p>
                <p>
                    <label for="password">
                        Password: 
                    </label>
                    <input name ="password" id="password" type="password" title="Enter your password"/>
                </p>
                <p>
                    <label for="passwordconf">
                        Confirm your password 
                    </label>
                    <input name ="passwordconf" id="passwordconf" type="password" title="Confirm your password"/>
                </p>
                <p>
                    <input type="submit" value="Submit" id="submit"/>
                    <button id="reset">Reset</button>
                </p>
                </form>
            </div>
        </div>
        
        <%@include file="WEB-INF/jspf/footer.jspf"%>
    </body>
    
    <script>
        function isValidEmailAddress(emailAddress) 
        {
            var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
            return pattern.test(emailAddress);
        };
        
        $(function()
        {
            $(document).tooltip();
        });
        
        $(function()
        {
            $("#submit")
            .button()
            .click(function(event)
            {
                $(".error").hide();
                var hasError=false;
                var emailAddressVal=$("#mail").val();
                var firstnameVal=$("#firstname").val();
                var lastnameVal=$("#lastname").val();
                var usernameVal=$("#username").val();                
                var passwordVal=$("#password").val();
                var passwordconfVal=$("#passwordconf").val();
                
                if(emailAddressVal=='')
                {
                    hasError=true;
                    $("#mail").after('<span class="error">Please enter your mail address</span>')
                }
                if(firstnameVal=='')
                {
                    hasError=true;
                    $("#firstname").after('<span class="error">Please enter your firstname</span>')
                }
                if(lastnameVal=='')
                {
                    hasError=true;
                    $("#lastname").after('<span class="error">Please enter your lastname</span>')
                }
                if(usernameVal=='')
                {
                    hasError=true;
                    $("#username").after('<span class="error">Please enter your username</span>')
                }
                if(passwordVal=='')
                {
                    hasError=true;
                    $("#password").after('<span class="error">Please enter your password</span>')
                }
                if(passwordconfVal=='')
                {
                    hasError=true;
                    $("#passwordconf").after('<span class="error">Please confirm your password</span>')
                }
                if(!isValidEmailAddress(emailAddressVal) && !hasError)
                {
                    hasError=true;
                    $("#mail").after('<span class="error">Please enter a valid mail address</span>')
                }
                if(passwordVal!=passwordconfVal && !hasError)
                {
                    hasError=true;
                    $("#password").after('<span class="error">Please enter the same value for both fields</span>')
                }
            });
            
            $("#reset")
            .button()
            .click(function(event)
            {
                $("#firstname").val('');
                $("#lastname").val('');
                $("#mail").val('');
                $("#username").val('');
                $("#password").val('');
                $("#passwordconf").val('');
                $(".error").hide();
            });
        });
    </script>
</html>
